<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <title>模型编辑器</title>
    <script data-main="info.js" src="../../boot.js" type="text/javascript"></script>
    <style type="text/css">
        body {
            position: relative;
            height: 100%;
            width: 100%;
        }

        .logger {
            margin: 0;
        }

        .logger-error {
            color: red;
        }

        /*iframe {*/
        /*    display: block; !* iframes are inline by default *!*/
        /*    !*background: #000;*!*/
        /*    border: none; !* Reset default border *!*/
        /*    height: 80vh; !* Viewport-relative units *!*/
        /*    !*width: 100vw;*!*/
        /*}*/
    </style>
</head>
<body style="display: none">
<div class="mini-fit">

    <div id="main-splitter" class="mini-splitter" vertical="true" style="width:100%;height:100%;">
        <div size="60%" showCollapseButton="false">
            <div class="mini-splitter" style="width:100%;height:100%;">
                <div size="75%" showCollapseButton="false">
                    <iframe id="designer" style="border:0;width: 100%;height: 100%;position: relative;"
                            frameborder="0"></iframe>
                </div>
                <div>
                    <div class="mini-fit dynamic-form" id="info-panel" style="padding: 10px;margin: auto">
                        <div class="mini-col-12 form-component" style="text-align: center">
                            <span style="font-size: 18px">模型信息</span>
                        </div>
                        <div class="mini-col-12 form-component">
                            <div class="form-item brick"><label class="form-label">ID</label>
                                <div class="input-block component-body">
                                    <input name="id" id="modelId" readonly class="mini-textbox" style="width: 100%">
                                </div>
                            </div>
                        </div>
                        <div class="mini-col-12 form-component">
                            <div class="form-item brick"><label class="form-label">模型名称</label>
                                <div class="input-block component-body">
                                    <input name="name" readonly class="mini-textbox" style="width: 100%">
                                </div>
                            </div>
                        </div>
                        <div class="mini-col-12 form-component">
                            <div class="form-item brick"><label class="form-label">运行方式</label>
                                <div class="input-block component-body">
                                    <div name="runMode" enabled="false" class="mini-radiobuttonlist" textField="text"
                                         valueField="id" value="CLUSTER"
                                         data="[{'id':'CLUSTER',text:'集群'},{'id':'DISTRIBUTED',text:'分布式'}]">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mini-col-12 form-component">
                            <div class="form-item form-text">
                                <label class="form-label">说明</label>
                                <div class="input-block component-body">
                                    <input name="description" class="mini-textarea" style="width: 100%;height: 50px">
                                </div>
                            </div>
                        </div>

                        <div class="mini-col-12 form-component" style="margin-top: 15px">
                            <div class="form-item brick" style="text-align: center">
                                <a class="mini-button select-execute">执行</a>

                                <a class="mini-button cancel-edit" plain="true">关闭</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div showCollapseButton="true">
            <div class="mini-splitter" vertical="false" style="width:100%;height:100%;">
                <div size="50%">
                    <div class="mini-toolbar" style="border-bottom:0;">
                        <div id="search-box-log" class="mini-clearfix search-box">
                            <div class="mini-col-4 form-component">
                                <div class="form-item">
                                    <label class="form-label">创建时间从：</label>
                                    <div class="input-block component-body">
                                        <input name="createTime$GTE" class="mini-datepicker" nullValue="null"
                                               format="yyyy-MM-dd H:mm:ss" timeFormat="H:mm:ss" showTime="true"
                                               showOkButton="true"
                                               showClearButton="false" width="100%"/>
                                    </div>
                                </div>
                            </div>
                            <div class="mini-col-4 form-component">
                                <div class="form-item">
                                    <label class="form-label">创建时间至：</label>
                                    <div class="input-block component-body">
                                        <input name="createTime$LTE" class="mini-datepicker" nullValue="null"
                                               format="yyyy-MM-dd H:mm:ss" timeFormat="H:mm:ss" showTime="true"
                                               showOkButton="true"
                                               showClearButton="false" width="100%"/>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="mini-fit">
                        <div id="log-grid" class="mini-datagrid" style="width:100%;height:100%;"
                             showPager="true" pageSize="10" sortField="createTime" sortOrder="desc">
                            <div property="columns">
                                <div field="createTime" renderer="eventCreateTimeRenderer" width="100"
                                     headerAlign="center" allowSort="true">日志时间
                                </div>
                                <div field="nodeId" width="100" renderer="logNodeIdRenderer" headerAlign="center">节点</div>
                                <div field="level" width="80" headerAlign="center">level</div>
                                <div field="message" width="200" align="center" headerAlign="center">消息</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div size="50%">
                    <div class="mini-toolbar" style="border-bottom:0;">
                        <div id="search-box-event" class="mini-clearfix search-box">
                            <div class="mini-col-4 form-component">
                                <div class="form-item">
                                    <label class="form-label">创建时间从：</label>
                                    <div class="input-block component-body">
                                        <input name="createTime$GTE" class="mini-datepicker" nullValue="null"
                                               format="yyyy-MM-dd H:mm:ss" timeFormat="H:mm:ss" showTime="true"
                                               showOkButton="true"
                                               showClearButton="false" width="100%"/>
                                    </div>
                                </div>
                            </div>
                            <div class="mini-col-4 form-component">
                                <div class="form-item">
                                    <label class="form-label">创建时间至：</label>
                                    <div class="input-block component-body">
                                        <input name="createTime$LTE" class="mini-datepicker" nullValue="null"
                                               format="yyyy-MM-dd H:mm:ss" timeFormat="H:mm:ss" showTime="true"
                                               showOkButton="true"
                                               showClearButton="false" width="100%"/>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="mini-fit">
                        <div id="event-grid" class="mini-datagrid" style="width:100%;height:100%;"
                             showPager="true" pageSize="10" sortField="createTime" sortOrder="desc">
                            <div property="columns">
                                <div field="createTime" renderer="eventCreateTimeRenderer" width="100"
                                     headerAlign="center" allowSort="true">事件时间
                                </div>
                                <div field="nodeId" width="100" renderer="eventNodeIdRenderer" headerAlign="center">节点</div>
                                <div field="event" width="80" headerAlign="center">事件</div>
                                <div field="ruleData" width="200" align="center" headerAlign="center">数据</div>
                                <div name="action" renderer="renderAction" headerAlign="center" align="center">操作</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

<div class="mini-window" id="run-window" showToolbar="true" showModal="false" style="width: 800px;height: 550px"
     title="运行参数">
    <div property="toolbar" style="padding:5px;">

        <a class="mini-button confirm-execute">确认</a>
        <a class="mini-button clear-error" style="display: none">清除错误信息</a>
    </div>
    <div class="mini-fit dynamic-form">
        <div class="mini-col-6 form-component">
            <div class="form-item brick"><label class="form-label">开始节点</label>
                <div class="input-block component-body">
                    <input name="startWith" textField="label" class="mini-combobox" style="width: 100%">
                </div>
            </div>
        </div>

        <div class="mini-col-6 form-component">
            <div class="form-item brick"><label class="form-label">结束节点</label>
                <div class="input-block component-body">
                    <input name="endWith" textField="label" allowInput="false" class="mini-combobox"
                           style="width: 100%">
                </div>
            </div>
        </div>

        <div class="mini-col-12 form-component">
            <div class="form-item form-text"><label class="form-label">参数</label>
                <div class="input-block component-body">
                    <input class="mini-textarea" emptyText="请输入执行参数,对象请输入JSON格式"
                           id="executeParam"
                           name="executeParam"
                           style="width: 100%;height: 14em">
                </div>
            </div>
        </div>

        <div class="mini-col-12 form-component">
            <div class="form-item form-text"><label class="form-label">响应</label>
                <div class="input-block component-body">
                    <input class="mini-textarea" id="response" style="width: 100%;height: 13em">
                </div>
            </div>
        </div>

    </div>

</div>

<div class="mini-window" id="event-log-detail-window" showToolbar="true" showModal="false" style="width: 600px;height: 450px"
     title="详情">
    <div class="mini-fit dynamic-form">
        <div class="mini-col-12 form-component">
            <div class="form-item form-text"><label class="form-label">详细数据</label>
                <div class="input-block component-body">
                    <input class="mini-textarea" name="event-log-detail" emptyText="请输入执行参数,对象请输入JSON格式" id="event-log-detail"
                           style="width: 100%;height: 28em">
                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>